<template>
	<view class="content">
		<view class="backImg">
			<image class="logo" :src="logo" mode="widthFix"></image>
			<view class="myInfoWarp">
				<image :src="bgmimg" mode="" class="myImg"></image>
				<view class="myInfo">
					<h3>{{username}}</h3>
					<span class="second">账号：{{phone}}</span>
				</view>
			</view>
		</view>
		<view class="text-area">
			<view class="left">
				<h3>每日签到</h3>
				<span>已签到：{{userAdd}}天</span>
			</view>
			<view class="right">
				<button :type="todaystatus === 1 ? '' : 'primary'" size="mini" :disabled="todaystatus === 1" @tap="todays" :class="todaystatus === 1 ? 'active' : ''">{{ todaystatus === 1 ? '已签到' : '签到'  }}</button>
			</view>
		</view>
		<view class="text-area">
			<view class="left">
				<h3>个人中心</h3>
				<span>我的勋章：{{ medal }}</span>
			</view>
			<view class="right">
				<!-- <p>打卡详情 ></p> -->
				<p @tap="person">信息修改 ></p>
				<!-- <button type="primary" size="mini" style="background-color: #fff;color: orange;" @tap="today">签到</button> -->
			</view>
		</view>
		
		<button @tap="loginOut" style="background-color:#115385;color: #fff;width: 95%;padding: 0 10rpx;">退出登录</button>
	</view>
</template>

<script>
	import { selectUsers, today, selectTodayS,selectAllAdd } from "../../api/index.js"
	export default {
		data() {
			return {
				username: 'Hello',
				phone: null,
				logo: 'https://www.longyugou.top:8008/icon/ill/play/ele.png',
				bgmimg: 'https://www.longyugou.top:8008/small/logo.png',
				todaystatus: 0,
				medal: '暂无',
				userAdd: 0
			}
		},
		onShow() {
			this.username = uni.getStorageSync('users')
			this.personInfo()
		},
		methods: {
			loginOut(){
				uni.removeStorageSync('users')
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			async person(){
				uni.navigateTo({
					url: "/pages/person/person?code=" + this.phone
				})
			},
			async personInfo(){
				let res = await selectUsers({user: this.username});
				let userAddTem = await selectAllAdd({user: this.username})
				if(userAddTem){
					this.userAdd = userAddTem.data.length
				}
				if(res.data && res.data[0].bgmimg !== null || res.data[0].logo !== null){
					this.phone = res.data[0].phone
					this.logo = res.data[0].logo
					this.bgmimg = res.data[0].bgmimg
					this.todaystatus = res.data[0].todaystatus
					this.medal = res.data[0].medal
				} else if(res.data) {
					this.phone = res.data[0].phone
				}
				await selectTodayS({user: this.username})
			},
			async todays(){
				await today({user: this.username})
				this.personInfo()
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.backImg {
		width: 100%;
		height: 500rpx;
		overflow: hidden;
		position: relative;
	}
	.logo {
		width: 100%;
		height: 100%;
		opacity: 0.3;
	}

	.text-area {
		width: 90%;
		padding: 20rpx;
		/* background: linear-gradient(to right, #FF8008,#FFC837); */
		background: linear-gradient(to right, #115385,#7EC2ED);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	/* .title {
		font-size: 36rpx;
	} */
	.myInfoWarp {
		position: absolute;
		left: 10%;
		bottom: 50rpx;
		display: flex;
	}
	.myImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		box-shadow: 0 0 10px blue;
		margin-right: 20rpx;
	}
	.myInfo {
		height: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.second {
		color: #498787;
	}
	.left, .right {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #fff;
	}
	.active {
		color: #115385 !important;
	}
</style>
